---
title: Обратная связь
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="Header" />
</Frame>

Указывает на прогресс или обратный отсчет и перемещается справа налево.

<Tabs>

<Tab title="Usage">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Свойства          | Тип     | Описание                                                                                    | По умолчанию |
| ----------------- | ------- | ------------------------------------------------------------------------------------------- | ------------ |
| Продолжительность | число   | Общая продолжительность анимации индикатора прогресса в миллисекундах                       | 3            |
| Задержка          | число   | Задержка начала анимации индикатора прогресса в миллисекундах                               | 0            |
| Сглаживание       | строка  | Сглаживающая функция для анимации индикатора прогресса                                      | easeInOut    |
| Высота индикатора | число   | Высота полосы в пикселях                                                                    | 24           |
| Цвет полосы       | строка  | Цвет полосы                                                                                 | gray80       |
| Автозапуск        | boolean | Если `true`, анимация индикатора прогресса начинается автоматически при загрузке компонента | `истина`     |

</Tab>
</Tabs>

## Круговой индикатор прогресса

Указывает на прогресс задачи, часто используется на экранах загрузки или в областях, где необходимо сообщить пользователю о текущих процессах.

<Tabs>

<Tab title="Usage">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Props">

| Свойства      | Тип    | Описание                              | По умолчанию |
| ------------- | ------ | ------------------------------------- | ------------ |
| размер        | число  | Размер кругового индикатора прогресса | 50           |
| Ширина полосы | число  | Ширина линии индикатора прогресса     | 5            |
| Цвет полосы   | строка | Цвет индикатора прогресса             | currentColor |

</Tab>

</Tabs>
